import React, { memo, Component } from 'react'
import { Image, Avatar, Button, Input, Select, message,Tag,Modal } from 'antd'
import { getClassLevel,setClassLevel } from '@/api'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import { Table } from 'antd'
import SelectPerson from '../../components/pageComponents/selectPerson'
import {getSchoolLevel,savePermisson,queryStudentByPermissionCode} from '@/api'
import { esESIntl } from '@ant-design/pro-provider'
import {schoolArrOption,classArrOption,accountArrOption,arrOption} from './../../utils/permission.js'
const BaseUrl = baseUrl()
const { Option } = Select
const { Search } = Input;

const tagRender = (props) => {
  const { label, value, closable, onClose } = props;
  const onPreventMouseDown = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };
  return (
    <Tag
      color={value}
      onMouseDown={onPreventMouseDown}
      closable={closable}
      onClose={onClose}
      style={{
        marginRight: 3,
      }}
    >
      {label}
    </Tag>
  );
};
class SchoolPermission extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data:null,//获取的个人权限码
      visible:false,
      schoolArr:[],
      AccountArr:[],
      classArr:[],
      studentId:'',
      onshow:false,
      tableData:'',//表格数据
      selectCode:'',//选中的状态码
      pageSize: 10,
      pageNum: 1,
      total: null,
      selectId:'',

    }
  }

  componentDidMount() {
    this.getTableData()
  }
   //修改权限
   handleOk = () => {
    const { studentId,selectId, title, content,schoolArr,classArr,AccountArr } = this.state
    let data = {
      studentId,
      title,
      content
    }
    let arr=schoolArr.concat(classArr),str=[]
     arr=arr.concat(AccountArr)
    // debugger
    arr.map((item)=>{
      str.push(item.codeNum)
    })
    
    // if(schoolArr)
    savePermisson({studentId:studentId,schoolLevel:str.join(',')}).then(res=>{
      if(res.data.code==200)
      {
         message.success(res.data.message)
         this.getStudentLevel(studentId)
         this.setState({visible:false})

      }
      else
      {
        message.error(res.data.message)
      }
     
    })
  }
  //获取表格数据
  getTableData=(filter)=>{
    let {pageNum,pageSize,}=this.state
    let permissionCode=''
    queryStudentByPermissionCode({permissionCode:filter,pageNum:pageNum,pageSize:pageSize}).then(res=>{
      if(res.data.code==200)
      {
        this.setState({tableData:res.data.data,total:res.data.pagination.total})
      }
    })
  }
  getStudentLevel=(studentId,type)=>{
    getSchoolLevel({studentId}).then(res=>{
      let levelArr=res?.data?.schoolLevel,arrAcc=[],arrSch=[],arrClass=[];
      
      // 账号类
      accountArrOption?.map((item)=>{
        levelArr?.includes(item.codeNum)&&arrAcc.push(item)
      })
      // 校园类
      schoolArrOption?.map((item)=>{
        levelArr?.includes(item.codeNum)&&arrSch.push(item)
      })
      // 班级类
      classArrOption?.map((item)=>{
        levelArr?.includes(item.codeNum)&&arrClass.push(item)
      })
      // levelArr.includes('101')&&arrClass.push({label:'班级管理（本院范围）',value:'lime',codeNum:'101'})
      this.setState({
        schoolArr:arrSch,
        AccountArr:arrAcc,
        classArr:arrClass,
        studentId:studentId,
       
        // 
      })
      if(type==3){
        this.setState({visible:true})
      }
      if(type==1)
      {
        this.setState({
          // onshow:false,
          visible:true,
          data:res?.data?.schoolLevel,
        })
      }
      else
      {
        this.setState({
          onshow:true,
          data:res?.data?.schoolLevel,
          dataOnshow:res?.data?.schoolLevel,
          // selectId:studentId
        })
      }
    });
  }
  render() {
    const { data,selectId,dataOnshow,visible,schoolArr,AccountArr,classArr,onshow,tableData} = this.state
    const columns = [
      {
        title: '姓名',
        dataIndex: 'realName',
        align: 'center',
        render: (row, item, index) => {
          return item.realName ? (
            item.realName
          ) : (
            <span style={{ color: '#fa346f' }}>未实名</span>
          )
        }
      },
      {
        title: 'UID',
        dataIndex: 'studentId',
        align: 'center'
      },
      {
        title: '班级',
        dataIndex: 'className',
        align: 'center'
      },
      {
        title: '昵称',
        dataIndex: 'nickName',
        align: 'center'
      },
      {
        title: '权限',
        dataIndex: 'schoolLevel',
        align: 'left',
        width:600,
        render: (row, item, index) => {
                return (<div>
               <div className='afterTablePermissionItem'> 
               {
                arrOption.map(itemIndex=>{
                 return item.schoolLevel?.includes(itemIndex.codeNum)?<Tag color={itemIndex.value}>{itemIndex.label}</Tag>:''
                })
              }
          {/* {item.schoolLevel?.includes('68')?<Tag color="magenta">院级青年大学习大表</Tag>:''}
            {item.schoolLevel?.includes('100')?<Tag color="red">院级奖项管理后台</Tag>:''}
            {item.schoolLevel?.includes('102')?<Tag color="volcano">班级管理（本校范围）</Tag>:''}
            {item.schoolLevel?.includes('999')?<Tag color="orange">校园权限指派</Tag>:''}
            {item.schoolLevel?.includes('32')?<Tag color="gold">失物招领超级工作台</Tag>:''}
            {item.schoolLevel?.includes('101')?<Tag color="lime">班级管理（本院范围）</Tag>:''}
            {item.schoolLevel?.includes('103')?<Tag color="green">班级管理(全系统)</Tag>:''}
              {item.schoolLevel?.includes('998')?<Tag color="cyan">封号</Tag>:''} */}
          
          </div>
                </div>)
              }
      },
      {
        title: '操作',
        dataIndex: 'option',
        align: 'center',
        render: (row, item, index) => {
          return <span style={{ color: '#fa346f' }} onClick={()=>{this.getStudentLevel(item.studentId,1)}}>权限设置</span>
          
        }
      },
     
      // {
      //   title: '权限等级',
      //   dataIndex: 'level',
      //   align: 'center',
      //   //   defaultSortOrder: 'descend',
      //   sorter: (a, b) => a.level - b.level,
      //   render: (row, item, index) => {
          
      //   }
      // }

    ]
     //分页器
     const pagination = {
      current: this.state.pageNum,
      pageSize: this.state.pageSize,
      onChange: (e) => {
        this.setState(
          {
            pageNum: e
          },
          () => {
            this.getList()
          }
        )
      },
      total: this.state.total
    }

    return (
      <div className="setting-opration">
        <div className='searchStyle'>
          <div className='searchLine'>
              <span style={{marginRight:'10px',fontSize:'14px',fontWeight:'bold'}}>搜索:</span>
              <SelectPerson onSelect={(studentId)=>{this.getStudentLevel(studentId);this.setState({selectId:studentId})}}>
              </SelectPerson>
          </div>
          
            <Button disabled={!onshow} type="primary" onClick={()=>{ this.getStudentLevel(selectId,3)}}>权限指派</Button>
         
          {/* <Button type="primary" onClick={()=>{this.setState({visible:true})}}>权限指派</Button> */}
          </div>
          {onshow?<div style={{marginBottom:'10px'}}>
          <div className='afterPermission'>已有权限</div>
          <div className='afterPermissionItem'>账号类: 
            <span className='searchStyleDivTwo'>
              {
                accountArrOption.map(item=>{
                 return dataOnshow?.includes(item.codeNum)?<Tag color={item.value}>{item.label}</Tag>:''
                })
              }
            </span>
          </div>
          <div className='afterPermissionItem'>校园类: 
            <span className='searchStyleDivTwo'>
            {
                schoolArrOption.map(item=>{
                 return dataOnshow?.includes(item.codeNum)?<Tag color={item.value}>{item.label}</Tag>:''
                })
              }
            </span>
          </div>
          <div className='afterPermissionItem'>班级类: 
            <span className='searchStyleDivTwo'>
            {
                classArrOption.map(item=>{
                 return dataOnshow?.includes(item.codeNum)?<Tag color={item.value}>{item.label}</Tag>:''
                })
              }
            </span>
          </div>
        </div>:''}
        
        <Modal
          title="权限指派"
          visible={visible}
          onOk={this.handleOk}
          onCancel={()=>{
            this.setState({
              visible: false,
              // schoolArr:[],
              // AccountArr:[],
              // classArr:[],
            })
          }}
          destroyOnClose={true}
          okText="确认"
          cancelText="取消"
        >
          <div>
            <ul>
              <li>
                 账号类：
                 <Select
                    mode="multiple"
                    showArrow
                    tagRender={tagRender}
                    defaultValue={AccountArr}
                    onChange={(value,s)=>{
                      // debugger
                      this.setState({AccountArr:s})
                    }}
                    style={{
                      width: '100%',
                    }}
                    options={accountArrOption}
                  />
              </li>
              <li>
                校园类：
                <Select
                    mode="multiple"
                    showArrow
                    tagRender={tagRender}
                    defaultValue={schoolArr}
                    style={{
                      width: '100%',
                    }}
                    onChange={(value,s)=>{
                      // debugger
                      this.setState({schoolArr:s})
                    }}
                    options={schoolArrOption}
                  />
              </li>
              <li>
                班级类：
                <Select
                    mode="multiple"
                    showArrow
                    tagRender={tagRender}
                    defaultValue={classArr}
                    onChange={(value,s)=>{
                      // debugger
                      this.setState({classArr:s})
                    }}
                    style={{
                      width: '100%',
                    }}
                    options={classArrOption}
                  />
              </li>
            </ul>
          </div>
        </Modal>
        <div className="outer-dot-box">
            <div className="dot-box-title classPermission-icon">
            根据权限筛选 
            <Select
                    // mode="multiple"
                    showArrow
                    placeholder='请选择'
                    tagRender={tagRender}
                    // defaultValue={AccountArr}
                    onChange={(value,item)=>{
                      this.getTableData(item.codeNum)

                    }}
                    style={{
                      width: '300px',
                      marginLeft:'34px'
                    }}
                    options={arrOption}
                  />
            </div>
           
            <Table
              columns={columns}
              dataSource={tableData}
              // onChange={this.changeTable.bind(this)}
              style={{
                marginRight:'2vw'
              }}
              locale={{
                cancelSort: '点击取消排序',
                triggerAsc: '点击升序',
                triggerDesc: '点击降序'
              }}
              pagination={pagination}
            />
          </div>
      </div>
    )
  }
}
export default memo(SchoolPermission)
